<script setup>
	import { ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { onLoad, onShow } from '@dcloudio/uni-app'

	//订单信息
	const dealId = ref(0)
	const joininData = ref()
	const daysShort = ref()
	async function joinDetail() {
		const res = await http.request({
			url: '/api/bidding/biddingDetails',
			method: 'POST',
			data: {
				id: dealId.value,
			},
		})
		console.log(res)
		joininData.value = res.data
		const currentTimestamp = Math.floor(Date.now() / 1000)
		daysShort.value = joininData.value.pass_time - currentTimestamp
	}
	// 交易须知
	const needknowpopup = ref()
	async function needKnow() {
		await getRules()
		needknowpopup.value.open('bottom')
	}

	const ruleStrings = ref('')
	async function getRules() {
		const res = await http.request({
			url: '/api/index/getDetails',
			method: 'POST',
			data: {
				id: 6,
			},
		})
		console.log(res)
		ruleStrings.value = res.data.details
	}

	function closeNeedKnow() {
		needknowpopup.value.close('bottom')
	}

	//输入出价金额
	const paymoney = ref(0)
	function changeMoney(e) {
		paymoney.value = e.target.value
	}

	//确认出价创建订单
	async function surePay() {
		if (paymoney.value == 0) {
			uni.utils.toast('请输入出价金额')
			return
		} else if (
			Number(paymoney.value) > Number(joininData.value.buy_price) &&
			Number(joininData.value.buy_price) != 0
		) {
			uni.utils.toast('输入金额不可大于一口价')
			return
		} else if (
			Number(paymoney.value) < Number(joininData.value.min_price)
		) {
			uni.utils.toast('输入金额不可小于起拍价')
			return
		} else if (Number(paymoney.value) > Number(joininData.value.balance)) {
			uni.utils.toast('账户卡尘不足')
			return
		}
		const res = await http.request({
			url: '/api/bidding/offerOrder',
			method: 'POST',
			data: {
				id: dealId.value,
				money: paymoney.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('出价成功')
			setTimeout(() => {
				uni.reLaunch({
					url: `/transactionPage/joinsuccess/index?id=${dealId.value}`,
				})
			}, 2000)
		} else {
			console.log(res)
			uni.utils.toast(res.msg)
		}
	}

	const buypopup = ref()
	function justBuyPop() {
		buypopup.value.open('center')
	}

	async function justBuy() {
		paymoney.value = joininData.value.buy_price
		const res = await http.request({
			url: '/api/bidding/offerOrder',
			method: 'POST',
			data: {
				id: dealId.value,
				money: paymoney.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast(res.msg)
			setTimeout(() => {
				// uni.$emit('active', { active: 3 })
				uni.reLaunch({
					url: `/transactionPage/transaction/index?index=3`,
				})
			}, 2000)
		} else {
			console.log(res)
			uni.utils.toast(res.msg)
		}
	}

	// 考虑一下
	function goBack() {
		uni.navigateBack({ delta: 1 })
	}

	//商品详情弹出
	const goodspopup = ref()
	const goodsInfo = ref({
		goods_name: '',
		img: '',
	})
	function checkgoods(item) {
		console.log(item)
		goodsInfo.value = item
		goodspopup.value.open('bottom')
	}

	onLoad((option) => {
		dealId.value = option.id
	})
	onShow(() => {
		joinDetail()
	})
</script>

<template>
	<view class="joinpay-content">
		<view class="joinpay-content-top">
			<view class="joinpay-content-top-item">
				<image
					:src="joininData.himg"
					style="
						width: 88rpx;
						height: 88rpx;
						border-radius: 44rpx;
						margin-right: 22rpx;
					"
					mode=""
				></image>
				<view class="" style="font-size: 30rpx; font-weight: 700">
					{{ joininData.nickname }}
				</view>
			</view>
			<view class="joinpay-content-top-item">
				<image
					src="../../static/hourglass.png"
					style="width: 60rpx; height: 60rpx; margin-right: 8rpx"
					mode=""
				></image>
				<view class="" style="font-size: 26rpx; font-weight: 700">
					<uni-countdown
						:show-day="false"
						:hour="
							Math.floor((daysShort % (60 * 60 * 24)) / (60 * 60))
						"
						:minute="Math.floor((daysShort % (60 * 60)) / 60)"
						:second="Math.floor(daysShort % 60)"
					/>
					<!-- {{
						`${Math.floor(
							(daysShort % (60 * 60 * 24)) / (60 * 60)
						)}:${Math.floor((daysShort % (60 * 60)) / 60)}`
					}} -->
				</view>
			</view>
		</view>
		<view class="joinpay-content-goods">
			<view class="joinpay-content-goods-title"> 交易内容 </view>
			<scroll-view
				class="scroll-view_H"
				scroll-x="true"
				style="height: 160rpx; margin-top: 10rpx"
			>
				<view
					class=""
					style="
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
					"
				>
					<image
						v-for="(goods, index) in joininData.goods"
						:key="'goods' + index"
						:src="goods.img"
						@click="checkgoods(goods)"
						style="
							display: block;
							flex-shrink: 0;
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							margin-right: 22rpx;
						"
						mode=""
					></image>
				</view>
			</scroll-view>
		</view>
		<view class="wanna-pay">
			<view class="wanna-pay-title">
				<view
					class="wanna-pay-title-left"
					style="font-size: 30rpx; font-weight: 700"
				>
					我要出价
				</view>

				<view class="wanna-pay-title-right back" @click="needKnow"
					>交易须知
				</view>
			</view>
			<view class="wanna-pay-price">
				<view class="" style="margin-right: 20rpx; font-size: 28rpx">
					出价
				</view>
				<input
					class="uni-input"
					style="width: 194rpx"
					type="number"
					placeholder="请输入金额"
					@input="changeMoney"
				/>
				<view
					class=""
					v-if="joininData.is_buy == 1"
					style="display: flex; align-items: center"
				>
					<view class="one-price-button" @click="justBuyPop">
						一口价带走
					</view>
					<view class="" style="font-size: 28rpx; color: #d8d8d8">
						一口价直接支付
					</view>
				</view>
			</view>
		</view>
		<view
			class=""
			style="
				padding: 22rpx;
				border-top: 4rpx dashed #F5F5F5;
				background-color: #fff;
				font-size: 24rpx;
				color: #3d3d3d;
			"
		>
			<view class="" style="line-height: 94rpx;"> 出价说明： </view>
			<view class="" style="margin-bottom: 30rpx; color: #aaaaaa">
				当前商品起拍价为<text style="color: black;font-weight: 700;">{{joininData.min_price}}</text>，成交价不可高于商品参考价总值的120%。
			</view>
			<view class="" style="line-height: 94rpx;"> 一口价说明： </view>
			<view class="" style="margin-bottom: 20rpx;color: #aaaaaa"> 当前商品一口价为<text style="color: black;font-weight: 700;">{{joininData.buy_price}}</text></view>
		</view>
		<view class="joinpay-bottom">
			<view
				class="button"
				style="margin-right: 94rpx; background-color: #eeeeee"
				@click="goBack"
			>
				考虑一下
			</view>
			<view class="button" @click="surePay"> 确认出价 </view>
		</view>

		<uni-popup ref="needknowpopup" type="bottom">
			<view class="needknowpopup-content">
				<view
					class=""
					style="
						position: relative;
						align-items: center;
						width: 100%;
						font-size: 44rpx;
						text-align: center;
						line-height: 128rpx;
					"
				>
					<view class=""> 交易须知 </view>
					<view
						class=""
						style="position: absolute; right: 14rpx; top: 0"
						@click="closeNeedKnow"
					>
						X
					</view>
				</view>
				<view
					class=""
					style="
						height: 70vh;
						border-radius: 26rpx;
						overflow: hidden;
						background-color: #fff;
					"
				>
					<scroll-view scroll-y="true" style="height: 70vh">
						<view
							style="
								width: 94%;
								height: 100%;
								margin: 0 auto;
								display: flex;
								align-items: center;
								padding-bottom: env(safe-area-inset-bottom);
							"
							class=""
						>
							<rich-text :nodes="ruleStrings"></rich-text>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<!-- 一口价出层 -->
		<uni-popup ref="buypopup" type="center">
			<view class="buypopup-content">
				<view class="buypopup-title"> 提示 </view>
				<view class="buypopup-content-tow">
					一口价拍下商品后订单支付有效期为10分钟，违规超时未支付账号可能会被平台封禁处理。</view
				>
				<view class="buypopup-button">
					<view class="" @click="buypopup.close('center')">
						再想一下
					</view>
					<view class="" @click="justBuy"> 确认带走 </view>
				</view>
			</view>
		</uni-popup>

		<!-- 详情弹出层 -->
		<uni-popup ref="goodspopup" type="bottom">
			<view class="goodspopup-content">
				<view class="goods-title">{{ goodsInfo.goods_name }} </view>
				<image
					:src="goodsInfo.img"
					style="width: 660rpx; height: 660rpx"
					mode=""
				></image>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.joinpay-content {
		position: relative;
		height: 100vh;
		padding: 20rpx 0;
		box-sizing: border-box;
		background-color: #f5f5f5;
		.joinpay-content-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 124rpx;
			padding: 0 20rpx;
			background-color: #fff;
			box-sizing: border-box;
			.joinpay-content-top-item {
				display: flex;
				align-items: center;
			}
		}
		.joinpay-content-goods {
			height: 300rpx;
			padding: 0 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			.joinpay-content-goods-title {
				font-size: 30rpx;
				font-weight: 700;
				line-height: 86rpx;
			}
		}
		.wanna-pay {
			height: 192rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			.wanna-pay-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.wanna-pay-title-right {
					width: 192rpx;
					height: 58rpx;
					border-radius: 29rpx;
					background-color: $transaction-color;
					line-height: 58rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 700;
				}
			}
			.wanna-pay-price {
				display: flex;
				align-items: center;
				padding: 0 0 0 30rpx;
				.one-price-button {
					width: 168rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 12rpx;
					background-color: $transaction-color;
					font-size: 28rpx;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}
		.pay-type {
			height: 222rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			.pay-type-titel {
				font-size: 30rpx;
				font-weight: 700;
			}
			.pay-type-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 55rpx;
				.pay-type-item-left {
					display: flex;
					align-items: center;
				}
				.pay-type-item-right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}
		.joinpay-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 194rpx;
			background-color: #fff;
			.button {
				width: 268rpx;
				height: 86rpx;
				background-color: $transaction-color;
				border-radius: 43rpx;
				text-align: center;
				line-height: 86rpx;
				font-size: 28rpx;
				font-weight: 700;
			}
		}
		.needknowpopup-content {
			height: 1260rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0 0;
			background: linear-gradient(
				162deg,
				#ffe60f 3%,
				#fbf7e7 10%,
				#fff6a8 67%,
				#f7efa6 104%
			);
		}
		.buypopup-content {
			width: 600rpx;
			height: 550rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-radius: 36rpx;
			background-color: #fff;
			.buypopup-title {
				height: 114rpx;
				border-bottom: 1px solid #d8d8d8;
				text-align: center;
				font-size: 40rpx;
				line-height: 114rpx;
			}
			.buypopup-content-tow {
				height: 283rpx;
				padding-top: 86rpx;
				box-sizing: border-box;
				text-align: center;
				font-size: 28rpx;
				color: #9b9b9d;
			}
			.buypopup-button {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;
				view {
					width: 234rpx;
					height: 80rpx;
					background-color: $transaction-color;
					border-radius: 40rpx;
					text-align: center;
					font-size: 26rpx;
					font-weight: 700;
					line-height: 80rpx;
					&:first-child {
						background-color: #eee;
					}
				}
			}
		}
		.goodspopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 886rpx;
			width: 710rpx;
			margin: 0 auto;
			padding-top: 36rpx;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			.goods-title {
				margin-bottom: 17rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
